<template>
	<div id="navbar">
		<md-theme :md-name="theme">
				<md-toolbar class="top-nav">
					<md-button class="md-icon-button" @click.native="toggleLeftSidenav">
						<md-icon><i class="iconfont icon-menu"></i></md-icon>
					</md-button>
					<h2 class="md-title" style="flex: 1" v-text="activeRoute"></h2>
					<md-button class="md-icon-button" @click.native="logOut">
						<md-icon><i class="iconfont icon-logout"></i></md-icon>
					</md-button>	
				</md-toolbar>		
				<md-tabs md-fixed class="bottom">
					<md-tab id="movies" md-label="电影"></md-tab>
					<md-tab id="music" md-label="音乐"></md-tab>
					<md-tab id="books" md-label="书籍"></md-tab>
					<md-tab id="pictures" md-label="美图"></md-tab>
				</md-tabs>
		</md-theme>
	</div>
</template>
<script>
export default {
	methods:{
		toggleLeftSidenav() {
			this.$emit("toggleLeftSidenav");
		},
		logOut(){
			this.$router.push("login");
		}
	},
	computed:{
		theme(){
			return this.$store.getters.THEME_COLOR1;
		},
		activeRoute(){
			return this.$store.state.activeRoute;
		}
	}
}
</script>
<style scoped>
.bottom{
	position: fixed;
	bottom: 0!important;
	height: 48px;
	overflow: hidden;
	z-index: 99999;
}
.top-nav{
	position: fixed;
	width:100%;
	z-index: 3
}

</style>



